<template>
  <div class="user-settings-container">
    <!-- 个人信息模块 -->
    <div class="settings-card">
      <h2 class="section-title">个人信息</h2>
      <div class="avatar-section">
        <el-avatar :size="80" :src="userAvatar" />
        <el-button type="primary" class="upload-btn" @click="handleAvatarUpload">更换头像</el-button>
        <!-- 隐藏的文件输入框 -->
        <input
          ref="fileInputRef"
          type="file"
          accept="image/*"
          style="display: none"
          @change="handleFileChange"
        />
      </div>

      <el-form :model="userForm" label-width="80px" class="info-form">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="userForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="userForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="userForm.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="userForm.sex" placeholder="请输入性别" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUserInfo">保存修改</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 收货地址模块 -->
    <div class="settings-card">
      <div class="address-header">
        <h2 class="section-title">收货地址</h2>
        <el-button type="primary" @click="showAddressDialog">添加新地址</el-button>
      </div>

      <div class="address-list">
        <div v-for="(address, index) in addressList" :key="index" class="address-item">
          <div class="address-content">
            <div class="address-info">
              <span class="receiver">{{ address.receiver }}</span>
              <span class="phone">{{ address.phone }}</span>
              <div class="full-address">{{ address.province }} {{ address.city }} {{ address.detail }}</div>
              <el-tag v-if="address.isDefault" type="success" size="small">默认地址</el-tag>
            </div>
            <div class="address-actions">
              <el-button link type="primary" @click="editAddress(address)">编辑</el-button>
              <el-button link type="danger" @click="deleteAddress(index)">删除</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 地址编辑对话框 -->
    <el-dialog v-model="addressDialogVisible" :title="isEditing ? '编辑地址' : '新增地址'">
      <el-form :model="currentAddress">
        <el-form-item label="收件人" label-width="80px">
          <el-input v-model="currentAddress.receiver" />
        </el-form-item>
        <el-form-item label="手机号" label-width="80px">
          <el-input v-model="currentAddress.phone" />
        </el-form-item>
        <el-form-item label="省份" label-width="80px">
          <el-input v-model="currentAddress.province" />
        </el-form-item>
        <el-form-item label="城市" label-width="80px">
          <el-input v-model="currentAddress.city" />
        </el-form-item>
        <el-form-item label="详细地址" label-width="80px">
          <el-input v-model="currentAddress.detail" />
        </el-form-item>
        <el-form-item label="默认地址" label-width="80px">
          <el-switch v-model="currentAddress.isDefault" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addressDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Address {
  receiver: string
  phone: string
  province: string
  city: string
  detail: string
  isDefault: boolean
}

// 用户表单数据
const userForm = ref({
  username: '张三',
  email: 'zhangsan@example.com',
  phone: '13800138000',
  idCard: '125632569996',
  sex: "男"
})

// 初始头像地址
const userAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

// 隐藏的文件输入框引用
const fileInputRef = ref<HTMLInputElement | null>(null)

// 地址相关数据
const addressList = ref<Address[]>([
  {
    receiver: '张三',
    phone: '13800138000',
    province: '广东省',
    city: '深圳市',
    detail: '南山区科技园1号',
    isDefault: true
  }
])

const addressDialogVisible = ref(false)
const isEditing = ref(false)
const currentAddress = ref<Address>({
  receiver: '',
  phone: '',
  province: '',
  city: '',
  detail: '',
  isDefault: false
})

// 显示地址对话框
const showAddressDialog = () => {
  currentAddress.value = {
    receiver: '',
    phone: '',
    province: '',
    city: '',
    detail: '',
    isDefault: false
  }
  isEditing.value = false
  addressDialogVisible.value = true
}

// 保存地址
const saveAddress = () => {
  if (currentAddress.value.isDefault) {
    addressList.value.forEach(addr => addr.isDefault = false)
  }
  if (isEditing.value) {
    // 更新逻辑
  } else {
    addressList.value.push({ ...currentAddress.value })
  }
  addressDialogVisible.value = false
}

// 删除地址
const deleteAddress = (index: number) => {
  addressList.value.splice(index, 1)
}

// 编辑地址
const editAddress = (address: Address) => {
  currentAddress.value = { ...address }
  isEditing.value = true
  addressDialogVisible.value = true
}

// 保存用户信息
const saveUserInfo = () => {
  console.log('保存用户信息:', userForm.value)
}

// 处理头像上传按钮点击事件
const handleAvatarUpload = () => {
  if (fileInputRef.value) {
    fileInputRef.value.click()
  }
}

// 处理文件选择事件
const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = target.files
  if (files && files.length > 0) {
    const file = files[0]
    // 模拟上传过程
    simulateUpload(file)
  }
}

// 模拟上传过程
const simulateUpload = (file: File) => {
  // 模拟上传延迟
  setTimeout(() => {
    const reader = new FileReader()
    reader.onload = (e) => {
      if (e.target) {
        userAvatar.value = e.target.result as string
      }
    }
    reader.readAsDataURL(file)
  }, 1000)
}
</script>

<style scoped>
.user-settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.settings-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-bottom: 24px;
  padding: 24px;
}

.section-title {
  color: #303133;
  margin-bottom: 20px;
  font-size: 18px;
  border-left: 4px solid #409EFF;
  padding-left: 12px;
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.upload-btn {
  height: 36px;
}

.info-form {
  max-width: 500px;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.address-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.3s;
}

.address-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.address-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-info {
  flex: 1;
}

.receiver {
  font-weight: 500;
  margin-right: 12px;
}

.phone {
  color: #606266;
}

.full-address {
  color: #909399;
  margin: 8px 0;
}

.address-actions {
  min-width: 100px;
  text-align: right;
}

.el-tag {
  margin-top: 8px;
}
</style>